<template>
    <div style="margin-bottom: 10px;">
        <!-- 订单类型单独一行 -->
        <div style="margin-bottom: 8px;">
            <label>订单类型：续费订单</label>
        </div>
        <!-- 业务开始时间和日期选择器在同一行 -->
        <div style="display: flex; align-items: center; gap: 8px;margin-bottom: 8px;">
            <label style="white-space: nowrap;">业务开始时间：</label>
            <ElDatePicker v-model="props.data.ywkssj" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled />
            <label style="white-space: nowrap;">业务结束时间：</label>
            <ElDatePicker v-model="props.data.ywjssj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" disabled />
        </div>

        <div style="display: flex; align-items: center; gap: 8px;margin-bottom: 8px;">
            <label style="white-space: nowrap;margin-right: 4px;">续费时间(月)：</label>
            <ElInputNumber style="width: 200px;" v-model="props.data.xfsj"></ElInputNumber>
        </div>

        <div style="display: flex; align-items: center; gap: 8px;margin-bottom: 8px;">
            <label style="white-space: nowrap;">续费开始时间：</label>
            <ElDatePicker v-model="props.data.xfkssj" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            <label style="white-space: nowrap;">续费结束时间：</label>
            <ElDatePicker v-model="props.data.xfjssj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </div>

        <div style="display: flex; align-items: center; gap: 8px;margin-bottom: 8px;">
            <label style="white-space: nowrap;">收费模式：{{ props.data.sfmsVal }}</label>
        </div>
    </div>

    <ElTable class="list-table is-border" :="$attrs" border :data="list">
        <ElTableColumn label="服务类型" width="240">
            <template #default="{ row }">
                <ElSelect v-model="row.fwlxVal" clearable>
                    <ElOption v-for="item in fwlx" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="服务班次" width="250">
            <template #default="{ row }">
                <ElSelect v-model="row.fwbcVal" clearable>
                    <ElOption v-for="item in fwbc" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="提成点数">
            <template #default="{ row }">
                <ElInputNumber v-model="row.tcds"></ElInputNumber>
            </template>
        </ElTableColumn>
        <ElTableColumn label="咨询量">
            <template #default="{ row }">
                <ElInputNumber v-model="row.zxl"></ElInputNumber>
            </template>
        </ElTableColumn>
        <ElTableColumn label="是否开票">
            <template #default="{ row }">
                <ElSelect v-model="row.sfkpVal" clearable>
                    <ElOption v-for="item in sfkp" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="发票类型">
            <template #default="{ row }">
                <ElSelect v-model="row.fplxVal" clearable>
                    <ElOption v-for="item in fplx" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="票面税点">
            <template #default="{ row }">
                <ElSelect v-model="row.pmsdVal" clearable>
                    <ElOption v-for="item in pmsd" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { ElSelect, ElTableColumn, ElDatePicker, ElText, ElInputNumber, ElRow, ElCol, ElFormItem } from 'element-plus'
import { getDictInfo } from '../api';

interface Props {
    data: any
}

const props = withDefaults(defineProps<Props>(), {
    data: () => ({})
})

let list = computed(() => {
    return props.data.xfList;
});

let fwlx = ref([]);
let fwbc = ref([]);
let sfkp = ref([]);
let fplx = ref([]);
let pmsd = ref([]);

onMounted(async () => {
    console.log(props.data.value);
    fwlx.value = await getDictInfo("customType");
    fwbc.value = await getDictInfo("serviceShift");
    sfkp.value = await getDictInfo("sfkp");
    fplx.value = await getDictInfo("fplx");
    pmsd.value = await getDictInfo("pmsd");
})

// 你也可以使用watch来监听整个list的变化
watch(() => props.data.xfsj, (newVal) => {
    // 计算续费开始时间（业务结束时间的下一天）
    const ywjssj = new Date(props.data.ywjssj);
    const xfkssj = new Date(ywjssj);
    xfkssj.setDate(ywjssj.getDate() + 1);

    // 计算续费结束时间（续费开始时间 + 续费月份数）
    const xfjssj = new Date(xfkssj);
    xfjssj.setMonth(xfjssj.getMonth() + parseInt(newVal));
    xfjssj.setDate(xfjssj.getDate() - 1); // 减去一天，因为加月份会到下个月的同日

    // 格式化日期为 YYYY-MM-DD
    const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    // 更新数据
    props.data.xfkssj = formatDate(xfkssj);
    props.data.xfjssj = formatDate(xfjssj);

    console.log('续费开始时间:', props.data.xfkssj);
    console.log('续费结束时间:', props.data.xfjssj);

}, { immediate: true });

</script>